<template>
	<view class="recordListbg">
		<view class="pad30">
			<view class="cards" v-for="(it,i) in dataList" :key="i">
				<view class="flex-c">
					<view class="fontsize32 fontbold colorMain">保顺物流</view>
					<view class="paiche bgRed colorfff fontsize24 marL20">{{it.planDetail.coalType}}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">出发地:</view>
					<view>{{it.planDetail.origin}}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">目的地:</view>
					<view>{{it.planDetail.destination}}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">公里数:</view>
					<view>{{it.planDetail.distanceKm}}KM</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">需求车辆数:</view>
					<view>{{it.planDetail.requiredTrucks}}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">已报名人数:</view>
					<view>{{it.planDetail.applyCount}}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">运费:</view>
					<view class="colorRed">￥{{it.planDetail.freightFee}}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">派车时间:</view>
					<view>{{it.planDetail.dispatchTime}}</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">联系人:</view>
					<view class="flex-c">
						<view>{{it.planDetail.contactName}}</view>
						<view class="marL10">{{it.planDetail.contactPhone}}</view>
					</view>
				</view>
				<view class="flex-cb marT20">
					<view class="color999">车队长:</view>
					<view class="flex-c">
						<view>{{it.captainName}}</view>
						<view v-if="it.planDetail.showCaptainInfo" class="marL10">{{it.captainPhone}}</view>
					</view>
				</view>
				<view v-if="it.isCaptain" class="flex-cb marT20">
					<view class="color999">车队情况</view>
					<view class="flex-cc">
						<view class="look bgMain colorfff fontbold"
							@click.stop="goToPage('/pages/mine/reviewFleet?planId='+it.planId)">查看</view>
						<view class="look bgMain colorfff fontbold marL20" @click.stop="goDispatchList(it)">去运输</view>
					</view>
				</view>
				<view v-else class="flex-cb marT20">
					<view class="color999">审核状态:</view>
					<view v-if="it.auditStatus" class="look bgMain colorfff fontbold marL20"
						@click.stop="goDispatchList(it)">去运输</view>
					<view v-else class="colorRed">审核中</view>
				</view>
			</view>
			<view style="margin: 40rpx 0;">
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	import commonApi from '@/api/common.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loading',
				dataList: [],
				total: 0,
			}
		},

		onLoad() {
			this.page = 1;
			this.status = 'loading';
			this.dataList = [];
			this.applyList()
		},
		methods: {
			applyList() {
				commonApi.applyList({
					page: this.page,
					size: this.size,
				}).then((res) => {
					if (res.status == 200) {
						let resOrderList = res.data.records;
						this.dataList = this.dataList.concat(resOrderList);
						this.total = res.data.total;
						if (resOrderList.length < this.size) {
							this.status = "nomore";
						}
					}
				});
			},
			goDispatchList(item) {
				let data = JSON.stringify(item)
				this.goToPage(`/pages/mine/dispatchList?data=${data}`)
			},
		},

		onReachBottom() {
			if (this.status == 'nomore') {
				return;
			}
			this.page++;
			this.applyList()
		},
	}
</script>

<style lang="scss" scoped>
	.recordListbg {
		width: 100%;
		min-height: 100%;

		.cards {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.paiche {
				border-radius: 50rpx;
				padding: 3rpx 15rpx;
				text-align: center;
			}

			.look {
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				text-align: center;
			}
		}
	}
</style>
